<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>Angular-basic</title>
</head>
<body ng-app="app">

<div class="container">
    用户名:<input type="text" id="userName" /><input type="button" value="注册" id="registerBtn"/><br/>
    key:<input type="text" id="userKey" readonly /><br/>
    sendTo:<select id="sendToList"></select><input type="button" value="刷新" id="refreshToKeys"/><br/>
    message:<input type="text" id="message" /><br/><input type="button" value="发送" id="sendMessage"/><br/>
    <div id="messageDiv">
    </div>
</div>

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/socket.io/socket.io-client/socket.io.js"></script>
<script>
    //注册返回key
    var socket = io('http://127.0.0.1:4000');
    //查询所有的注册key
    $("#registerBtn").click(function(){
        socket.emit('register',$("#userName").val());

    });
    $("#refreshToKeys").click(function(){
        socket.emit('clientList',$("#userName").val());
    });
    $("#sendMessage").click(function(){
        socket.emit('message',$("#userKey").val(),$("#sendToList").val(),$("#message").val());
    });

    socket.on('registerAck',function(data){
        $("#userKey").val(data);
    });

    socket.on('message',function(data){
        $("#messageDiv").append(data.from+" " +data.msg+ "<br/>")
    });
    socket.on('clientListAck',function(data){
        $("#sendToList").html("");
        for (var index in  data){
            $("#sendToList").append("<option value='"+data[index]+"'>"+data[index]+"</option>")
        }
    });

    //发送消息

    //监听接收消息

</script>
</body>
</html>
